import "./sass/song-list.scss";
import React from 'react'
import { CustomerServiceOutlined,PlayCircleOutlined  } from "@ant-design/icons";
import {inject,observer} from 'mobx-react'
import {withRouter} from 'react-router'

@inject('songlist')@observer
class SongList extends React.Component {
  render(){
    let props = this.props
    return (
      <div className="list">
        {props.list &&
          props.list.map((item, index) => {
            return (
              <div
                className="list-item"
                key={index}
                onClick={() => {
                  props.songlist.setSonglistDetail(item)
                  props.history.push('/songListDetail')
                }}
              >
                <p className="play-count">
                  <CustomerServiceOutlined className="music-icon" />
                  {item.playCount}
                </p>
                <p className="list-item-description">
                  {item.description}
                </p>
                <img src={item.coverImgUrl} alt=""></img>
                <PlayCircleOutlined className='list-open'/>
                <p className='list-item-name'>{item.name}</p>
              </div>
            );
          })}
      </div>
    );
  }
}

export default withRouter(SongList);
